<template>
  <div class="event1">
    <h3>我是event1组件---兄弟组件</h3>
    <h4>event2触发：{{ numArr }}</h4>
    <el-button @click="emitValue">触发123</el-button>
    <el-button @click="changeNumArr">改变自己的属性numArr</el-button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive } from "vue";
import mittBus from "@/utils/mittBus";
/*
  兄弟组件通信
    ==>mitt
 */
let numArr = reactive([1]);
onMounted(() => {
  mittBus.on("emit-brother", (arr: any): void => {
    console.log("arr", arr);
    // Vue3.0不能直接对数组进行赋值
    numArr.length = 0; // 清空原数组
    numArr.push(...arr);
  });
  console.log("生命周期onMounted", mittBus);
});
onUnmounted(() => {
  //   mittBus.all.clear();
  mittBus.off("emit-brother");
  console.log("生命周期onUnmounted", mittBus);
});

interface event1Emits {
  (e: "click"): void;
}
const $emit = defineEmits<event1Emits>();
// const $emit = defineEmits(["click"]);

const emitValue = () => {
  $emit("click");
};

const changeNumArr = () => {
  numArr.splice(0, 1);
};
</script>

<style scoped lang="scss">
.event1 {
  height: 200px;
  width: 400px;
  background: green;
}
</style>
